<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row style="padding: 0 24px 24px">
        <div class="accountInfo">
          <ul class="bankInfo">
            <li>
              <p class="accountTitle">工资专户账号</p>
              <p>
                <span class="color999">专户银行</span>
                <span class="color333">{{
                  topAccountInfo.bankName || '--'
                }}</span>
              </p>
              <p>
                <span class="color999">银行网点</span>
                <span class="color333">{{
                  topAccountInfo.bankSiteName || '--'
                }}</span>
              </p>
              <p>
                <span class="color999">专户账号</span>
                <span class="color333">{{
                  topAccountInfo.account || '--'
                }}</span>
              </p>
            </li>
            <li>
              <p class="color999">工资专户余额</p>
              <p class="color333 balace">
                ￥{{ topAccountInfo.balance || '--' }}
              </p>
              <div class="botBorder"></div>
              <div class="payoff">
                <div>
                  <p class="color999">总缴纳</p>
                  <p class="color333">
                    ￥{{ topAccountInfo.payTotal || '--' }}
                  </p>
                </div>
                <div>
                  <p class="color999">总支出</p>
                  <p class="color333">
                    ￥{{ topAccountInfo.expensesTotal || '--' }}
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-row>
      <div class="spacing"></div>
      <el-row style="padding: 24px 24px 0">
        <el-col :span="12">
          <div class="secondaryTitle secondaryTitleTheme">流水明细</div>
        </el-col>
        <!-- <el-col :span="24">
                    <el-row class="toolbar searchInputWidth" style="padding-bottom:0;">
                        <el-form :inline="true" :model="filterField" ref="searchConditions">
                            <el-form-item label="时间" class="row-padding-bottom">
                                <el-date-picker v-model="filterField.createDate" type="date" placeholder="请选择" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-col> -->
      </el-row>
      <el-row style="padding-top: 24px">
        <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker
                v-model="filterField.createDate"
                type="date"
                placeholder="请选择"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button> -->
            </el-form-item>
          </el-form>
        </el-row>
      </el-row>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          @sort-change="sortChange"
          :max-height="tableHeight"
          :data="tableData"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="createTime"
            sortable="custom"
            label="时间"
            align="center"
            :formatter="formatTd"
            width="180px"
          ></el-table-column>
          <el-table-column
            prop="total"
            sortable="custom"
            label="金额(元)"
            align="center"
            :formatter="formatTd"
            width="180px"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="类型"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column prop="remark" label="备注" align="center" :formatter="formatTd"></el-table-column>  -->
          <el-table-column prop="remark" label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="projectName" label="所属项目" align="center" :formatter="formatTd"></el-table-column> -->
          <el-table-column prop="projectName" label="所属项目" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'accountManageDetailFlow',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '专户流水',
      back: true,
      loading: true,
      isShow: false, //列表加载
      //表格数据
      tableData: [],
      requestUrl: 'api-acc/companyaccount/expand/accass',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      filterField: {
        createDate: '',
        account: '',
      },
      id: '', //主键id
      topAccountInfo: '',
    }
  },
  created() {
    this.filterField.account = this.$route.query.account
    this.id = this.$route.query.id
    this.getAcountInfo()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {},
  methods: {
    getAcountInfo() {
      this.axios({
        method: 'post',
        url: 'api-acc/companyaccount/expand/info',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.topAccountInfo = response.data.result
          }
        })
        .catch((error) => {
          this.$message.error('专户数据获取失败')
        })
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    goBack() {
      this.$router.push({
        path: '/home/yiChangCustomRequirements/accountManageTab',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/yiChangCustomRequirements/enterpriseAccountManage',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  .mainCon {
    top: 198px;
    .accountInfo {
      ul li {
        width: 415px;
        height: 184px;
        float: left;
        padding: 24px 30px;
        border: 1px solid #dee5f4;
        .balace {
          font-size: 20px !important;
        }
        .color999 {
          font-size: 14px;
        }
        .color333 {
          font-size: 14px;
          line-height: 34px;
        }
        &:first-child {
          background: #f5f7fb;
          .accountTitle {
            font-size: 18px;
            margin-bottom: 20px;
          }
        }
        &:last-child {
          border-left: none;
          .botBorder {
            width: 100%;
            height: 1px;
            background: #dee5f4;
            margin: 20px 0;
          }
          .payoff div {
            width: 50%;
            float: left;
          }
        }
      }
    }
    .blockquote {
      color: #333;
      font: bold 16px Microsoft YaHei;
      height: 35px;
    }

    .blockquote:before {
      background-color: #009588;
      content: '';
      padding: 2px;
      margin-right: 10px;
    }
  }
}
.tableBoxCur {
  padding-top: 0 !important;
}
</style>
